@property --p {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
body {
  background: black;
}

p {
  margin: 0;
}

.container {
  font-size: 20px;
  color: white;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans";
}
.container .box {
  width: 500px;
  height: 500px;
  margin: 80px auto;
  position: relative;
  line-height: 2;
}
.container .box .eraser {
  position: absolute;
  inset: 0;
}
.container .box .eraser .text {
  color: transparent;
  background: linear-gradient(to right, transparent var(--p), black calc(var(--p) + 5px));
  animation: erase 5s forwards linear;
}

@keyframes erase {
  from {
    --p: 0%;
  }
  to {
    --p: 100%;
  }
}